<!--
 * @FilePath: pieEchart4.vue
 * @Author: 杜芬
 * @Date: 2022-08-22 14:55:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-08-22 15:44:50
 * Copyright: 2022 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <!-- 南丁格尔玫瑰图图 -->
  <div id="main" ref="pieEchart" class="pieEchart" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'PieEchart',
  data() {
    return {
      property: 'value',
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.pieEchart);
      //   绘制图标
      myChart.setOption({
        grid: {
          // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },

        legend: {
          top: 'bottom',
        },
        toolbox: {
          show: true,
          feature: {
            // mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [45, 200],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' },
            ],
          },
        ],
      });
    },
  },
};
</script>
